<template>
  <div class="inventory-order-info-block">
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      :alert="true"
      rowKey="tableRowKey"
      :pageSize="queried.PageSize"
      :pageSizeOptions="['5','10','20','30']"
      :rowSelection="null">
      <template class="table-operator" slot="operator" >
        <span style="font-weight:bold;cursor:default;"><a style="cursor:default;">{{orderNo}}</a>单据详情</span>
      </template>
      <template slot="index" slot-scope="text,record,index">{{(queried.PageNo-1)*queried.PageSize+(index+1)}}</template>
      <span slot="materialTyleSlot" slot-scope="text">{{ 'material_type' | dictType(text) }}</span>
    </s-table>
  </div>
</template>

<script>
import { STable } from '@/components'
import { InventoryPlanDetailPage } from '@/api/modular/main/InventoryPlanManage'
const pagination = {PageNo:1,PageSize:5}
export default {
  name:'inventoryOrderInfoBlock',
  emits:["callback"],
  components:{STable},
  props:{
    queryId:{
      type:[Number,null],
      default:null
    },
    orderNo:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      columns:[
        { title: '序号', key: 'index', width: 70, align:'center', fixed:"left", scopedSlots: { customRender: 'index' }},
        { title: '容器编号', dataIndex: 'containerCode', key: 'containerCode' },
        { title: '库位编号', dataIndex: 'placeCode', key: 'placeCode' },
        { title: '物料编码', dataIndex: 'materialCode', key: 'materialCode' },
        { title: '物料名称', dataIndex: 'materialName', key: 'materialName' },
        { title: '物料类型', dataIndex: 'materialType', key: 'materialType', width: 120, scopedSlots: { customRender: 'materialTyleSlot' }},
        { title: '库存数', dataIndex: 'stockNumber', key: 'stockNumber' },
        { title: '盘点数', dataIndex: 'inventoryNumber', key: 'inventoryNumber' }
      ],
      queried:{...pagination},
      refreshKey:true,
    }
  },
  watch:{
    queryId(newV,oldV){
      if (newV!==oldV){
        this.initData()
      }
    }
  },
  methods:{
    initData(){
      this.refreshKey = true
      this.$refs.table.refresh()
    },
    loadData(parameter){
      parameter.Id = this.queryId
      if (this.queryId) {
        if (this.refreshKey) {
          parameter.pageNo = pagination.PageNo
          parameter.pageSize = pagination.PageSize
        } 
        this.refreshKey = false
        this.queried.PageNo = parameter.pageNo 
        this.queried.PageSize = parameter.pageSize 
        return InventoryPlanDetailPage(parameter).then((res) => {
          if (res.data.rows) {
            res.data.rows = res.data.rows.map((item,index)=>{
              item.tableRowKey = index
              return item
            })
          }
          return res.data
        })
      } else {
        return new Promise((resolve,reject)=>{
          resolve({
            pageNo:pagination.PageNo,
            pageSize:pagination.PageSize,
            rows:[],
            totalPage:0,
            totalRows:0
          })
        })
      } 
    },
  }
}
</script>

<style lang="less" scoped>
.inventory-order-info-block{
  padding-top: 8px;
}
</style>